<template>
    <div class="center">
        <div class="tab">
            <div :class="{ 'list': true, 'active': currentIndex == 1 ? true : false }" @click="tabFn(1)">
                <div class="title">代表之家</div>
                <div class="number">123</div>
            </div>
            <div :class="{ 'list': true, 'active': currentIndex == 2 ? true : false }" @click="tabFn(2)">
                <div class="title">代表联络站</div>
                <div class="number">123</div>
            </div>
            <div :class="{ 'list': true, 'active': currentIndex == 3 ? true : false }" @click="tabFn(3)">
                <div class="title">代表联络点</div>
                <div class="number">123</div>
            </div>
        </div>
        <div class="map">
            <div v-show="currentIndex === 1">
                <div id="main1"></div>
            </div>
            <div v-show="currentIndex === 2">2</div>
            <div v-show="currentIndex === 3">3</div>
        </div>
        <div class="number_box">
            <div class="list">
                <div class="title">累计注册人数</div>
                <div class="num">13</div>
            </div>
            <div class="list">
                <div class="title">累计访问人数</div>
                <div class="num">13</div>
            </div>
            <div class="list">
                <div class="title">本月注册人数</div>
                <div class="num">13</div>
            </div>
            <div class="list">
                <div class="title">本月访问人数</div>
                <div class="num">13</div>
            </div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios'
export default {
    data() {
        return {
            currentIndex: 1,
            mapDataList:[
            {id:1,name:"a",value:1},
            {id:2,name:"a",value:2},
            {id:3,name:"a",value:3},
            {id:4,name:"a",value:4},
            {id:5,name:"a",value:5},
            {id:6,name:"a",value:6},
            {id:7,name:"a",value:7},
            {id:8,name:"a",value:8},
            {id:9,name:"a",value:9},
            {id:10,name:"a",value:10},
            {id:11,name:"a",value:11},
            {id:12,name:"a",value:12},
            ]
        }
    },
    components: {

    },
    mounted() {
        this.init()
    },
    methods: {
        tabFn(index) {
            console.log(index);
            this.currentIndex = index
        },
        init() {
            let chartDom2 = document.getElementById('main1');
            let myChart = echarts.init(chartDom2);
            let option;
            let _that = this
            let geoCoordMap = {
                口岸街道: [119.895339, 32.300022],
                刁铺街道: [119.867020, 32.361603],
                许庄街道: [119.941177, 32.339973],
                沿江街道: [119.850883, 32.309761],
                永安洲镇: [119.917145, 32.232170],
                白马镇: [119.972076, 32.413788],
                胡庄镇: [120.043488, 32.322464],
                大泗镇: [119.980316, 32.378597],
                野徐镇: [119.929504, 32.396622],
                寺巷街道: [119.872169, 32.408951],
                明珠街道: [119.878778, 32.454808],
                凤凰街道: [119.939032, 32.439887],
            }
            let customerBatteryCityData = this.mapList


            axios.get("./ditu.json").then(response => {
                console.log('response------',response.data)
                echarts.registerMap('gaogang', response.data);
                option = {
                    // backgroundColor: 'rgba(0,2,89,0)',
                    tooltip: {
                        trigger: 'item',
                        show: true,
                        enterable: true,
                        textStyle: {
                            fontSize: 16,
                            color: '#fff'
                        },
                        backgroundColor: 'rgba(6, 51, 102, 1)',
                        formatter: '{b}{c}'
                    },
                    geo: [
                        {
                            map: 'gaogang',
                            aspectScale: 1,
                            roam: true, // 是否允许缩放
                            zoom: 1.2, // 默认显示级别
                            layoutSize: '80%',
                            layoutCenter: ['55%', '50%'],
                            itemStyle: {
                                normal: {
                                    areaColor: {
                                        type: 'linear-gradient',
                                        x: 0,
                                        y: 400,
                                        x2: 0,
                                        y2: 0,
                                        colorStops: [{
                                            offset: 0,
                                            color: 'rgba(15, 100, 164, 1)' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: 'rgba(61, 148, 242, 1)' // 50% 处的颜色
                                        }],
                                        global: true // 缺省为 false
                                    },
                                    // borderColor: 'rgba(122, 252, 255, 1)',
                                    borderWidth: 1,
                                    borderColor: '#0a53e9', //线
                                    // shadowColor: '#092f8f', //外发光
                                    // shadowOffsetX: 10,
                                    // shadowOffsetY: 10,
                                    // shadowBlur: 30
                                },
                                emphasis: {
                                    areaColor: {
                                        type: 'linear-gradient',
                                        x: 0,
                                        y: 300,
                                        x2: 0,
                                        y2: 0,
                                        colorStops: [{
                                            offset: 0,
                                            color: 'rgba(32, 92, 184, 1)' // 0% 处的颜色
                                        }, {
                                            offset: 1,
                                            color: 'rgba(9, 47, 143, 1)' // 50% 处的颜色
                                        }],
                                        global: true // 缺省为 false
                                    }
                                }
                            },
                            emphasis: {
                                itemStyle: {
                                    areaColor: '#0160AD'
                                },
                                label: {
                                    show: 0,
                                    color: '#fff'
                                }
                            },
                            zlevel: 3
                        },
                    ],
                    series: [
                        // map
                        {
                            geoIndex: 0,
                            // coordinateSystem: 'geo',
                            showLegendSymbol: true,
                            type: 'map',
                            roam: true,
                            label: {
                                normal: {
                                    show: false,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                },
                                emphasis: {
                                    show: false,
                                    textStyle: {
                                        color: '#fff'
                                    }
                                }
                            },

                            itemStyle: {
                                normal: {
                                    borderColor: '#2ab8ff',
                                    borderWidth: 1.5,
                                    areaColor: '#12235c'
                                },
                                emphasis: {
                                    areaColor: '#2AB8FF',
                                    borderWidth: 0,
                                    color: 'red'
                                }
                            },
                            map: 'guangdong', // 使用
                            data: customerBatteryCityData
                            // data: this.difficultData //热力图数据   不同区域 不同的底色
                        },
                        // 柱状体的主干
                        {
                            type: 'lines',
                            zlevel: 5,
                            effect: {
                                show: false,
                                symbolSize: 5 // 图标大小
                            },
                            lineStyle: {
                                width: 12, // 尾迹线条宽度
                                color: 'rgb(22,255,255, 0.6)',
                                opacity: 1, // 尾迹线条透明度
                                curveness: 0 // 尾迹线条曲直度
                            },
                            label: {
                                show: 0,
                                position: 'end',
                                formatter: '245'
                            },
                            silent: true,
                            data: lineData()
                        },
                        // 柱状体的顶部
                        {
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            geoIndex: 0,
                            zlevel: 5,
                            label: {
                                show: true,
                                formatter: function (item) {
                                    // console.log("item----",item)
                                    return ` `
                                },
                                position: "top",
                                color: 'rgb(255,255,255, 0.8)',
                                fontSize: 14
                            },
                            symbol: 'circle',
                            symbolSize: [12, 6],
                            itemStyle: {
                                // color:"#F7AF21",
                                color: 'rgb(22,255,255, 0.5)',
                                opacity: 1,
                            },
                            silent: true,
                            data: scatterData()
                        },
                        // 柱状体的底部
                        {
                            type: 'scatter',
                            coordinateSystem: 'geo',
                            geoIndex: 0,
                            zlevel: 4,
                            label: {
                                // 这儿是处理的
                                formatter: '{b}',
                                position: 'bottom',
                                color: '#fff',
                                fontSize: 12,
                                distance: 10,
                                show: true
                            },
                            symbol: 'circle',
                            symbolSize: [12, 6],
                            itemStyle: {
                                // color: '#F7AF21',
                                color: 'rgb(22,255,255, 0.5)',
                                opacity: 1
                            },
                            silent: true,
                            data: scatterData2()
                        },
                        // 底部外框
                        {
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            geoIndex: 0,
                            zlevel: 4,
                            label: {
                                show: false
                            },
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            symbol: 'circle',
                            symbolSize: [30, 15],
                            itemStyle: {
                                color: {
                                    type: 'radial',
                                    x: 0.5,
                                    y: 0.5,
                                    r: 0.5,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgb(22,255,255, 0)' // 0% 处的颜色
                                    },
                                    {
                                        offset: .75,
                                        color: 'rgb(22,255,255, 0)' // 100% 处的颜色
                                    },
                                    {
                                        offset: .751,
                                        color: 'rgb(22,255,255, 1)' // 100% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(22,255,255, 1)' // 100% 处的颜色
                                    }
                                    ],
                                    global: false // 缺省为 false
                                },

                                opacity: 1
                            },
                            silent: true,
                            data: scatterData2()
                        },
                        //画线
                        {
                            type: 'lines',
                            zlevel: 5,
                            effect: {
                                show: true,
                                period: 4, //箭头指向速度，值越小速度越快
                                trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
                                symbol: 'arrow', //箭头图标
                                symbolSize: 7, //图标大小
                            },
                            lineStyle: {
                                normal: {
                                    color: function (value) { //随机颜色
                                        ['#f21347', '#f3243e', '#f33736', '#f34131', '#f34e2b',
                                            '#f56321', '#f56f1c', '#f58414', '#f58f0e', '#f5a305',
                                            '#e7ab0b', '#dfae10', '#d5b314', '#c1bb1f', '#b9be23',
                                            '#a6c62c', '#96cc34', '#89d23b', '#7ed741', '#77d64c',
                                            '#71d162', '#6bcc75', '#65c78b', '#5fc2a0', '#5abead',
                                            '#52b9c7', '#4fb6d2', '#4ab2e5'
                                        ]
                                        return "#" + ("00000" + ((Math.random() * 16777215 +
                                            0.5) >> 0).toString(16)).slice(-6);
                                    },
                                    width: 1, //线条宽度
                                    opacity: 0.1, //尾迹线条透明度
                                    curveness: .3 //尾迹线条曲直度
                                }
                            },
                            data: [{
                                coords: [
                                    [119.895339, 32.300022],
                                    [119.881717, 32.318822]
                                ],
                                lineStyle: {
                                    color: '#4ab2e5'
                                }
                            }, {
                                coords: [
                                    [119.867020, 32.361603],
                                    [119.881717, 32.318822]
                                ],
                                lineStyle: {
                                    color: '#4fb6d2'
                                }
                            }, {
                                coords: [
                                    [119.941177, 32.339973],
                                    [119.881717, 32.318822]
                                ],
                                lineStyle: {
                                    color: '#52b9c7'
                                }
                            }, {
                                coords: [
                                    [119.850883, 32.309761],
                                    [119.881717, 32.318822]
                                ],
                                lineStyle: {
                                    color: '#5abead'
                                }
                            }, {
                                coords: [
                                    [119.917145, 32.232170],
                                    [119.881717, 32.318822]
                                ],
                                lineStyle: {
                                    color: '#f34e2b'
                                }
                            }, {
                                coords: [
                                    [119.972076, 32.413788],
                                    [119.881717, 32.318822]
                                ],
                                lineStyle: {
                                    color: '#f56321'
                                }
                            }, {
                                coords: [
                                    [120.043488, 32.322464],
                                    [119.881717, 32.318822]
                                ],
                                lineStyle: {
                                    color: '#f56f1c'
                                }
                            }, {
                                coords: [
                                    [119.980316, 32.378597],
                                    [119.881717, 32.318822]
                                ],
                                lineStyle: {
                                    color: '#f58414'
                                }
                            }, {
                                coords: [
                                    [119.929504, 32.396622],
                                    [119.881717, 32.318822]
                                ],
                                lineStyle: {
                                    color: '#f58f0e'
                                }
                            }, {
                                coords: [
                                    [119.872169, 32.408951],
                                    [119.881717, 32.318822]
                                ],
                                lineStyle: {
                                    color: '#f5a305'
                                }
                            }, {
                                coords: [
                                    [119.878778, 32.454808],
                                    [119.881717, 32.318822]
                                ],
                                lineStyle: {
                                    color: '#e7ab0b'
                                }
                            }, {
                                coords: [
                                    [119.939032, 32.439887],
                                    [119.881717, 32.318822]
                                ],
                                lineStyle: {
                                    color: '#dfae10'
                                }
                            }]
                        }
                    ]
                }
                myChart.setOption(option);
            }).catch(error => {
                console.log('error------', error)
            })





            // 动态计算柱形图的高度（定一个max）
            function lineMaxHeight() {
                const maxValue = Math.max(...customerBatteryCityData.map(item => item.value))
                return 1 / 450
            }
            // 柱状体的主干
            function lineData() {
                return customerBatteryCityData.map((item) => {
                    return {
                        coords: [geoCoordMap[item.name],
                        [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value *
                            lineMaxHeight()
                        ]
                        ]
                    }
                })
            }
            // 柱状体的顶部
            function scatterData() {
                return customerBatteryCityData.map((item) => {
                    return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value *
                        lineMaxHeight()]
                })
            }
            // 柱状体的底部
            function scatterData2() {
                return customerBatteryCityData.map((item) => {
                    return {
                        name: item.name,
                        value: geoCoordMap[item.name]
                    }
                })
            }
            //点击事件
            myChart.on('click', function (param) {
                if (param.data.id) {
                    _that.lianluozhan = false;
                    let parameters = {
                        zhenjieId: param.data.id
                    }
                    api.postData('/map/getZhenjieJiazhandian', parameters).then(response => {
                        if (response.code === 0) {
                            _that.zhenjie = true;
                            _that.zhenjieData.name = param.data.name
                            _that.zhenjieData.daibiaozhijiaList = response.data
                        }
                    })
                }
            })
        },
    },
}

</script>
<style scoped lang='scss'>
.center {
    height: 1000px;
    padding-top: 30px;
    box-sizing: border-box;

    .tab {
        width: 757px;
        height: 93px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .list {
            width: 207px;
            height: 93px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;

            .title {
                font-size: 18px;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
            }

            .number {
                font-size: 30px;
                font-weight: 700;
                color: rgba(255, 208, 66, 1);
                margin-bottom: 10px;
            }

            background: url('@/assets/images/center/noactive.svg') no-repeat top;
        }

        .active {
            background: url('@/assets/images/center/yesactive.svg') no-repeat top, url('@/assets/images/center/jiantou.svg') no-repeat center 75px;
        }
    }

    .map {
        height: 700px;
        border: 1px solid red;

        #main1 {
            width: 100%;
            height: 700px;
        }
    }

    .number_box {
        height: 150px;
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        .list {
            width: 116px;
            height: 124px;
            background: url('@/assets/images/center/dizuo.svg') no-repeat bottom;

            .title {
                font-size: 18px;
                font-weight: 400;
                color: rgba(247, 253, 255, 1);
                text-align: center;
                vertical-align: top;
            }

            .num {
                font-size: 48px;
                font-weight: 700;
                line-height: 48px;
                color: rgba(247, 205, 77, 1);
                text-align: center;
            }
        }
    }
}
</style>